<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="<%=basePath %>/static/js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/static/css/basic.css">
    <script src="<%=basePath %>/static/js/bootstrap.min.js"></script>
    <style>
        .bootstrap-admin-panel-content {
            padding-top: 10px;
        }
        
        .black_overlay {
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 1001;
            filter: alpha(opacity=88);
        }
        
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: auto;
            padding: 20px;
            border: 1px solid gray;
            background-color: white;
            z-index: 1002;
            overflow: auto;
            border-radius: 8px;
        }
    </style>
    <script>
        $(function () {
            $(".addBtn").on("click", function () {
                $("#light").hide().fadeIn(600).css("display", "block");
                $("#fade").hide().fadeIn(600).css("display", "block");
            });

            $("#inner").on("click", function () {
                $("#light").fadeOut(600).hide(300);
                $("#fade").fadeOut(600).hide(300);
            });

            $(".closeBtn").on("click", function () {
                $("#light").fadeOut(600).hide(300);
                $("#light-up").fadeOut(600).hide(300);
                $("#fade").fadeOut(600).hide(300);
            });

            $(".btn-update").on("click", function () {

                /*获得当前点击的修改按钮的父级的父级标签(tr)*/
                let parent = $(this).parent().parent();
                let readerId = parent.find(".hidden");
                /*获得当前点击修改按钮的时候，对应的隐藏域id*/
                let message = readerId.text();
                $("#readerId-up").val(message);


                $("#light-up").hide().fadeIn(600).css("display", "block");
                $("#fade").hide().fadeIn(600).css("display", "block");
            });


        })
    </script>
</head>
<body>
<!--头部-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:;">欢迎来到图书管理系统</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!--<li><a href="javascript:;" class="btn btn-default btn-login">登录</a></li>-->
                <li class="dropdown" style="margin-top: 5px;">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false"> <span
                        class="glyphicon glyphicon-user"></span> 欢迎您， admin <span
                        class="caret"></span></a>
                    <ul class="dropdown-menu" style="margin-top: 2px">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--主体-->
<div class="container-fluid" id="main">
    <div class="row">
        <div class="col-md-2 left-content">
            <div class="aside-nav">
                <ul class="list-group aside-nav-list">
                    <li class="list-group-item ">
                        <a href="<%=basePath%>/admin/bookmanager/1">图书管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item "><a href="<%=basePath%>/admin/booktypemanager">图书分类管理
                        <span
                            class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">图书借阅 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">图书归还 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">借阅查询 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">逾期处理 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item ">
                        <a href="<%=basePath%>/admin/adminmanager">管理员管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item ">
                        <a href="<%=basePath%>/admin/readermanager">读者管理
                            <span class="pull-right glyphicon glyphicon-chevron-right"></span>
                        </a>
                    </li>
                    <li class="list-group-item active"><a href="<%=basePath%>/admin/setting">系统设置
                        <span
                            class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                    <li class="list-group-item "><a href="javascript:;">在线考试 <span
                        class="pull-right glyphicon glyphicon-chevron-right"></span></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-10 right-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-wrap">
                        <div class="wrap-top">
                            <div class="panel panel-default">
                                <div class="panel-heading" style="color: #9d9d9d">添加读者类型</div>
                                <div class="panel-body" style="font-size: 15px">
                                    <input type="button" class="btn btn-primary btn-sm addBtn"
                                           value="添加">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrap-bottom">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th class="hidden">读者类型编号</th>
                        <th>读者类型</th>
                        <th>最大借阅数量</th>
                        <th>可借阅天数</th>
                        <th>逾期每日罚金</th>
                        <th>可续借天数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <c:if test="${readerTypes!=null}">
                        <tbody>
                        <c:forEach items="${readerTypes}" var="type">
                            <tr>
                                <td class="hidden">${type.readerId}</td>
                                <td>${type.readerTypeName}</td>
                                <td>${type.maxNum}</td>
                                <td>${type.borrowDay}</td>
                                <td>${type.penalty}</td>
                                <td>${type.renewDays}</td>
                                <td>
                                    <button class="btn btn-info btn-xs btn-update"
                                            style="margin-right: 3px"
                                    >修改
                                    </button>
                                    <a class="btn btn-info btn-xs"
                                       href="<%=basePath%>/readerType/del/${type.readerId}"
                                       target="_self"
                                       style="margin-right: 3px">删除
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </c:if>
                </table>
            </div>
        </div>
    </div>
</div>
<%--添加按钮的弹出框--%>
<div id="light" class="white_content">
    <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <div class="row">
        <div class="col-md-10 col-sm-offset-1">
            <!--保证样式水平不混乱-->
            <form class="form-horizontal" method="post" action="<%=basePath%>/readerType/add">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        添加新读者分类
                    </h4>
                </div>
                <div class="modal-body">
                    <!---------------------表单-------------------->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">读者类型</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="readerTypeName"
                                   name="readerTypeName"
                                   placeholder="请输入读者类型名称">
                            <label class="control-label" for="readerTypeName"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">最大借阅书量</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="maxNum"
                                   name="maxNum"
                                   placeholder="请输入最大借阅书量">
                            <label class="control-label" for="maxNum"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">可借天数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="borrowDay"
                                   name="borrowDay"
                                   placeholder="请输入可借天数">
                            <label class="control-label" for="borrowDay"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">逾期每日罚金</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="penalty"
                                   name="penalty"
                                   placeholder="请输入每日罚金">
                            <label class="control-label" for="penalty"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">续借天数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="renewDays"
                                   name="renewDays"
                                   placeholder="请输入逾期每日罚金">
                            <label class="control-label" for="renewDays"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default closeBtn" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="submit" class="btn btn-primary" id="addReaderType">
                        添加
                    </button>
                </div>
            </form>
            <%--<a id="inner" href="javascript:void(0)" onclick="">点这里关闭本窗口</a>--%>
        </div>
    </div>
</div>
<%--弹出层的半透明背景--%>
<div id="fade" class="modal black_overlay"></div>
<%--修改按钮的弹出框--%>
<div id="light-up" class="white_content">
    <button type="button" class="close closeBtn" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
    </button>
    <div class="row">
        <div class="col-md-10 col-sm-offset-1">
            <!--保证样式水平不混乱-->
            <form class="form-horizontal" method="post" action="<%=basePath%>/readerType/update">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel-up">
                        修改读者分类内容
                    </h4>
                </div>
                <div class="modal-body">
                    <!---------------------表单-------------------->
                    <div class="form-group hidden">
                        <label class="col-sm-3 control-label">读者类型编号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="readerId-up"
                                   name="readerId"
                                   placeholder="请输入读者类型编号">
                            <label class="control-label" for="readerTypeName"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">读者类型</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="readerTypeName-up"
                                   name="readerTypeName"
                                   placeholder="请输入读者类型名称">
                            <label class="control-label" for="readerTypeName"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">最大借阅书量</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="maxNum-up"
                                   name="maxNum"
                                   placeholder="请输入最大借阅书量">
                            <label class="control-label" for="maxNum"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">可借天数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="borrowDay-up"
                                   name="borrowDay"
                                   placeholder="请输入可借天数">
                            <label class="control-label" for="borrowDay"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">逾期每日罚金</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="penalty-up"
                                   name="penalty"
                                   placeholder="请输入每日罚金">
                            <label class="control-label" for="penalty"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">续借天数</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="renewDays-up"
                                   name="renewDays"
                                   placeholder="请输入逾期每日罚金">
                            <label class="control-label" for="renewDays"
                                   style="display: none;"></label>
                        </div>
                    </div>
                    <!---------------------表单-------------------->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default closeBtn" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="submit" class="btn btn-primary" id="addReaderType-up">
                        修改
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>